// 引入图表的核心组件
import * as echarts from 'echarts/core'

//引入折线图所需的组件
// import { GridComponent } from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

// 引入堆叠面积图表组件
import {
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
} from 'echarts/components'
/* import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers' */
// 折线图函数封装
function initBasicLineChart(chartDom, xAxisData, seriesData) {
    echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition])

    /* var chartDom = document.getElementById('main') 
    此种方式是Javascript中获取html文档中dom元素的方式，但是不适用于vue中 */

    var myChart = echarts.init(chartDom) //Vue3中引入dom元素的方式，此为第三步：访问dom
    var option

    option = {
        xAxis: {
            type: 'category',
            data: xAxisData,
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                data: seriesData,
                type: 'line',
            },
        ],
    }

    option && myChart.setOption(option)
}

// 堆叠面积图表封装
function initStackedAreaChart(chartDom, xAxisData, tempMinSeries, tempMaxSeries) {
    echarts.use([
        TitleComponent,
        ToolboxComponent,
        TooltipComponent,
        GridComponent,
        LegendComponent,
        LineChart,
        CanvasRenderer,
        UniversalTransition,
    ])

    // var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom)
    var option

    option = {
        title: {
            text: '未来七日天气预报',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985',
                },
            },
        },
        legend: {
            data: ['tempMin', 'tempMax'],
        },
        toolbox: {
            feature: {
                saveAsImage: {},
            },
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: xAxisData,
            },
        ],
        yAxis: [
            {
                type: 'value',
            },
        ],
        series: [
            {
                name: 'tempMax',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series',
                },
                data: tempMinSeries,
            },
            {
                name: 'tempMin',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series',
                },
                data: tempMaxSeries,
            },
        ],
    }

    option && myChart.setOption(option)
}
export {initBasicLineChart, initStackedAreaChart }